<template>
	<nav-header title="活动详情">
		<view class="bg-white mb-4">
			<u-swiper :list="actObj.imagesList" height="200" @change="e => currentNum = e.current" indicatorStyle="right: 20px"
				:autoplay="false" radius="0" @click="swiperClick">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ actObj.imagesList.length }}</text>
				</view>
			</u-swiper>
			<view class="p-4">
				<view class="text-black-33 font-bold text-lg" v-text="actObj.title"></view>
				<view v-if="actObj.joinEnabled == '0'" class="flex items-center justify-between mt-3_5">
					<view class="flex items-center">
						<u-avatar-group shape="square" :urls="actObj.headers" size="20" gap="0.4" maxCount="3"></u-avatar-group>
						<text class="text-gray-99" :class="{'pl-1_5': actObj.userTotal > 0}" v-text="actObj.userTotal == 0? '火热报名中':(actObj.userTotal + '人已报名')"></text>
					</view>
					<text class="text-gray-99" v-text="actObj.dictType || '暂无'"></text>
				</view>
			</view>
		</view>
		<view class="bg-white p-4 rounded-lg mb-4">
			<view class="flex items-center text-gray-66 mb-3">
				<i class="iconfont icon-shijian1 text-gray-66 pr-2"></i>
				<text v-text="$util.getFormatDate(actObj.startTime) + ' ~ ' + $util.getFormatDate(actObj.endTime)"></text>
			</view>
			<view class="flex items-center text-gray-66">
				<i class="iconfont icon-dingwei2 text-gray-66 text-lg pr-2"></i>
				<text v-text="actObj.address || '暂无'"></text>
			</view>
		</view>
		<view class="bg-white mx-2 rounded-lg mb-4">
			<u-parse :content="actObj.content" class="text-gray-66"></u-parse>
		</view>
		<view class="bg-white mx-2 pt-4 px-2 rounded-lg mb-24">
			<view class="flex items-center pb-4 border-b-ee">
				<i class="iconfont icon-comment text-color-theme text-lg"></i>
				<text class="text-gray-66 pl-2 pr-1_5" v-text="'评论区(' + data.pageTotal + ')'"></text>
			</view>
			<my-page ref="mypage" v-model="dataList" :height="300" @load-data="loadData">
				<template slot="content">
					<view v-for="(item,index) in dataList" :key="index" class="py-4 flex border-b-ee">
						<image :src="$util.formatImageIdUrl(item.avatarUrl)" class="w-10 h-10 rounded-lg" mode="aspectFill"></image>
						<view class="pl-3 flex-1">
							<view class="mb-3 text-base text-gray-66" v-text="item.nickName || '游客'"></view>
							<view class="text-black-33 tracking-wide mb-4 leading-6" v-text="item.content"></view>
							<view class="flex justify-between items-center text-gray-99">
								<text class="text-sm" v-text="$util.getFormatDate(item.createTime, 'yyyy-0m-0d 0h:0f')"></text>
								<view class="flex items-center">
									<i class="iconfont icon-dianzan1 text-lg" @click="saveLike(item)"></i>
									<text class="px-1" v-text="item.likeNum"></text>
									<!-- <i class="iconfont icon-pinglunxiao px-3 text-lg"></i> -->
									<!-- <i class="iconfont icon-fenxiang1 text-lg"></i> -->
								</view>
							</view>
						</view>
					</view>
				</template>
			</my-page>
		</view>
		<view class="bg-white w-full py-4 fixed bottom-0 z-50 shadow-lg">
			<view class="flex items-center mx-5">
				<view class="text-center mr-8">
					<i class="iconfont icon-fenxiang block text-xl text-color-a0"></i>
					<text class="text-gray-99 text-sm">分享</text>
				</view>
<!--				<view class="text-center mr-8" @click="collect">
					<i class="iconfont block text-xl" :class="actObj.isCollected? ['icon-collection-fill', 'text-color-theme']:['icon-collection', 'text-color-a0']"></i>
					<text class="text-gray-99 text-sm">收藏</text>
				</view>-->
				<view class="text-center mr-8" @click="$util.myNavigateTo('/pages_home/comment_form?actId=' + activityId)">
					<i class="iconfont icon-pinglunxiao block text-xl text-color-a0"></i>
					<text class="text-gray-99 text-sm">评论</text>
				</view>
				<view v-if="actObj.joinEnabled == '0'" class="flex items-center justify-center flex-1 py-2_5 rounded-full text-white"
					@click="()=>{
						if (!actObj.isJoined && actObj.onGoing) {
							$util.myNavigateTo('/pages_home/junchuang_form?id=' + activityId)
						}else {
							$u.toast(!actObj.onGoing? '活动没开始或已结束，无法报名.':'活动已报名')
						}
					}"
					:class="actObj.isJoined || !actObj.onGoing? ['bg-gray-500']:['bg-blue-500']"
					v-text="actObj.isJoined? '已参加':'我要参与'"></view>
			</view>
		</view>
	</nav-header>
</template>

<script>
	import MyPage from '@/components/my_page.vue'
	import NavHeader from '@/components/nav_header.vue'
	import * as systemApi from '@/interface/common/system.js'
	import * as activityApi from "@/interface/junchuang/activity.js"
	export default {
		components: {
			NavHeader,MyPage
		},
		data() {
			return {
				activityId: '',
				currentNum: 0,
				dataList: [],
				data: {pageTotal: 0},
				actObj: this.initAct({}),
			}
		},
		onPullDownRefresh () {
			this.$refs['mypage'].dataReload()
			uni.stopPullDownRefresh()
		},
		onLoad(e) {
			this.activityId = e.id
		},
		onReady() {
			this.initData()
			if (this.dataList.length > 0) this.$refs['mypage'].dataReload()
		},
		methods: {
			initData () {
				const v = this
				let today,df = new v.$dateFormat()
				df.setTime(new Date())
				today = df.toString('yyyy-0m-0d 0h:0f')
				activityApi.getActivityDetail ({activityId: v.activityId}).then(res=>{
					if (res.success) {
						let endTime = v.$util.getFormatDate(res.data.endTime, 'yyyy-0m-0d 0h:0f')
						let startTime = v.$util.getFormatDate(res.data.startTime, 'yyyy-0m-0d 0h:0f')
						Object.assign(v.actObj, res.data, {
							onGoing: today >= startTime && today <= endTime
						})
						if (v.actObj.userList.length > 0) {
							v.actObj.headers = v.actObj.userList.filter((item,index) => index < 3).map(item=>{
								return v.$util.formatImageIdUrl(item.avatarUrl)
							})
						}
						if (v.actObj.images) {
							v.actObj.images.split(",").forEach(id=>{
								v.actObj.imagesList.push(v.$util.formatImageIdUrl(id))
							})
						}
					}
				})
			},
			loadData(page, success, error){
				const v = this;
				Object.assign(v.data, page, {activityId: v.activityId})
				activityApi.getActivityCommentPageList(v.data).then(res=>{
					v.data.pageTotal = res.data.total || 0
					success(res)
				}).catch(error)
			},
			collect () {
				if (this.actObj.isCollected) {
					systemApi.deleteCollect(this.actObj.userCollectId).then(() => {
						this.actObj.isCollected = false
						this.actObj.userCollectId = ''
						uni.$u.toast("已取消收藏.")
					})
				  } else {
					systemApi.saveCollect(0, this.activityId).then(res => {
						if (res.success) {
							this.initData()
							uni.$u.toast("收藏成功.")
						}
					})
				}
			},
			saveLike (item) {
				activityApi.saveLike({
					type: '2',
					typeId: item.id
				}).then(res=>{
					if (res.success) {
						uni.$u.toast("点赞成功.")
					}
				})
			},
			swiperClick (index) {
				this.$util.picPreview(index, this.actObj.imagesList)
			},
			initAct ({title,dictType,headers=[],userList = [],images,imagesList = [],userTotal = 0,content,startTime,endTime,address,joinMax, isCollected = false, userCollectId, joinEnabled, isJoined = false, onGoing = false}) {
				return {title,dictType,headers,userList,images,imagesList,userTotal,content,startTime,endTime,address,joinMax, isCollected, userCollectId, joinEnabled, isJoined, onGoing}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f7f7f7;
	}

	.indicator-num {
	        padding: 2px 0;
	        background-color: rgba(0, 0, 0, 0.35);
	        border-radius: 100px;
	        width: 35px;
	        @include flex;
	        justify-content: center;

	        &__text {
	             color: #FFFFFF;
	             font-size: 12px;
	         }
	    }
</style>
